<template>
  <el-dialog
    title="奖金导入"
    :close-on-click-modal="false"
    :visible.sync="importjjDiaolgData.visible"
    fullscreen
    append-to-body
  >
    <div>
      <el-tabs type="card" v-model="activeName" @tab-click="handleClick(activeName)" class="tabBox">
        <el-tab-pane  v-if="importjjDiaolgData.showTab=='all'||activeName=='jigou'" label="机构奖金分配" name="jigou">
        </el-tab-pane>
        <el-tab-pane  v-if="importjjDiaolgData.showTab=='all'||activeName=='renyuan'" label="人员奖金分配" name="renyuan">
        </el-tab-pane>
      </el-tabs>
<!--      机构奖金分配-->
      <div v-if="activeName=='jigou'">
        <div class="boxsty" style="margin-bottom: 30px">
          <el-button type="primary" icon="el-icon-upload2" @click="jjdrBtn"
            >奖金导入</el-button
          >
          <el-table
            v-if="mountshow"
            :data="totalData"
            border
            stripe
            ref="table"
            :summary-method="getSummaries"
            show-summary
            min-height="50vh"
          >
            <el-table-column
              header-align="center"
              align="center"
              prop="name"
              label="单位名称"
            >
              <template slot-scope="scope">
                <el-input
                  placeholder="请输入内容"
                  :min="1"
                  v-model="scope.row.name"
                  clearable
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="amount1"
              label="安全奖"
            >
              <template slot-scope="scope">
                <el-input
                  placeholder="请输入内容"
                  :min="1"
                  v-model="scope.row.amount1"
                  clearable
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="amount2"
              label="优秀奖"
            >
              <template slot-scope="scope">
                <el-input
                  placeholder="请输入内容"
                  :min="1"
                  v-model="scope.row.amount1"
                  clearable
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              prop="amount3"
              label="总计"
            >
              <template slot-scope="scope">
                <el-input
                  placeholder="请输入内容"
                  :min="1"
                  v-model="scope.row.amount1"
                  clearable
                >
                </el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="130px"
      style="height: 85vh; overflow-y: auto"
    >
      <el-row
        v-for="(item, index) in dataForm.dataList"
        :key="index"
        v-if="mountshow"
      >
        <el-col :span="4">
          <el-form-item
            label-width="110px"
            label="奖金项名称"
            :prop="'dataList[' + index + '].jjxId'"
            :rules="[
              {
                required: true,
                message: '奖金项名称不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <el-select
              v-model="dataForm.dataList[index].jjxId"
              clearable
              placeholder="请选择奖金项"
              style="width: 100%"
              @change="jjxHandle(index)"
            >
              <el-option
                v-for="itema in cityHandle()"
                :key="itema.id"
                :label="itema.jjxMc"
                :value="itema.id"
                :disabled="itema.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item
            label-width="110px"
            label="奖金项金额"
            :prop="'dataList[' + index + '].jjJe'"
            :rules="[
              {
                required: true,
                message: '奖金项金额不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <el-input-number
              v-model="dataForm.dataList[index].jjJe"
              :min="0"
              :max="1000000000"
              :precision="2"
              :step="1"
              label="奖金项金额"
              style="width: 88%"
              @blur="jjxZehj"
            ></el-input-number>
            元
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item
            label-width="100px"
            label="机构分组"
            :prop="'dataList[' + index + '].jjxId'"
            :rules="[
              {
                required: true,
                message: '机构分组不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <el-select
              v-model="dataForm.dataList[index].jjxId"
              clearable
              placeholder="请选择机构分组"
              style="width: 100%"
              @change="jjxHandle(index)"
            >
              <el-option
                v-for="itema in cityHandle()"
                :key="itema.id"
                :label="itema.jjxMc"
                :value="itema.id"
                :disabled="itema.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item
            label-width="60px"
            label="公式"
            :prop="'dataList[' + index + '].jjxId'"
            :rules="[
              {
                required: true,
                message: '公式不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <el-select
              v-model="dataForm.dataList[index].jjxId"
              clearable
              placeholder="请选择公式"
              style="width: 100%"
              @change="jjxHandle(index)"
            >
              <el-option
                v-for="itema in cityHandle()"
                :key="itema.id"
                :label="itema.jjxMc"
                :value="itema.id"
                :disabled="itema.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item
            label-width="110px"
            label="奖金项日期"
            :prop="'dataList[' + index + '].jjxRq'"
            :rules="[
              {
                required: true,
                message: '奖金项日期不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <el-date-picker
              v-model="dataForm.dataList[index].jjxRq"
              @change="jjxudpate(item)"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="奖金项日期"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <div>
            <el-form-item
              label-width="110px"
              label="是否允许预留"
              :prop="'dataList[' + index + '].sfZx'"
            >
              <el-radio-group v-model="dataForm.dataList[index].sfZx">
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="2">
          <el-button
            @click="addItem()"
            icon="el-icon-plus"
            class="ml10"
          ></el-button>
          <el-button
            @click="removeItem(index)"
            style="right: 5px"
            class="ml10"
            icon="el-icon-minus"
          ></el-button>

        </el-col>
        <el-col :span="24" style="margin-bottom: 20px">
          <el-col :span="2" style="text-align: center">
            <el-button
              type="primary"
              icon="el-icon-arrow-up"
              circle
              v-if="item.shows"
              @click="item.shows = !item.shows"
            ></el-button>
            <el-button
              v-else
              type="primary"
              icon="el-icon-arrow-down"
              circle
              @click="item.shows = !item.shows"
            ></el-button>
          </el-col>
          <el-col :span="20">
            <el-table
              v-if="item.shows"
              :data="totalData"
              min-height="50vh"
              border
              stripe
            >
              <el-table-column
                header-align="center"
                align="center"
                prop="name"
                label="单位名称"
              >
                <template slot-scope="scope">
                  <el-input
                    placeholder="请输入内容"
                    :min="1"
                    v-model="scope.row.name"
                    clearable
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="amount1"
                label="安全奖"
              >
                <template slot-scope="scope">
                  <el-input
                    placeholder="请输入内容"
                    :min="1"
                    v-model="scope.row.amount1"
                    clearable
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="amount2"
                label="优秀奖"
              >
                <template slot-scope="scope">
                  <el-input
                    placeholder="请输入内容"
                    :min="1"
                    v-model="scope.row.amount2"
                    clearable
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="amount3"
                label="总计"
              >
                <template slot-scope="scope">
                  <el-input
                    placeholder="请输入内容"
                    v-model="scope.row.amount3"
                    :min="1"
                    clearable
                  >
                  </el-input>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="2" style="text-align: center" v-if="item.shows">
            <el-button type="primary">分配计算</el-button>
          </el-col>
        </el-col>
      </el-row>
    </el-form>
      </div>
<!--人员奖金分配-->
      <div v-if="activeName=='renyuan'">
        <el-button type="primary" icon="el-icon-upload2" @click="showRenyuan=true">奖金导入</el-button>
        <div v-if="showRenyuan">
          <el-table
            :data="dataList"
            v-loading="dataListLoading"
            ref="table"
            border
            stripe
            min-height="50vh"
            style="margin-top: 10px"
          >
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop=""
              label="序号"
              width="80"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="jjMc"
              label="人员编号"
              show-overflow-tooltip
              min-width="200"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="jjMc"
              label="姓名"
              show-overflow-tooltip
              min-width="200"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="jjMc"
              label="奖金总额（元）"
              show-overflow-tooltip
              min-width="200"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="jjMc"
              label="已发奖金"
              show-overflow-tooltip
              min-width="200"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              label="安全生产奖"
              show-overflow-tooltip
              min-width="200"
              header-align="center"
              align="center"
            >
              <el-table-column
                label="应得奖金"
                show-overflow-tooltip
                min-width="200"
                header-align="center"
                align="center"
              ></el-table-column>
              <el-table-column
                label="定向奖金"
                show-overflow-tooltip
                min-width="200"
                header-align="center"
                align="center"
              ></el-table-column>
              <el-table-column
                label="加扣奖金"
                show-overflow-tooltip
                min-width="200"
                header-align="center"
                align="center"
              ></el-table-column>
              <el-table-column
                label="实得奖金"
                show-overflow-tooltip
                min-width="200"
                header-align="center"
                align="center"
              ></el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      totalData: [
        {
          name: "吉林业务部",
          amount1: "100000",
          amount2: "3.2",
          amount3: 10,
        },
        {
          name: "天津业务部",
          amount1: "200000",
          amount2: "4.43",
          amount3: 12,
        },
        {
          name: "成都中心",
          amount1: "300000",
          amount2: "4.43",
          amount3: 12,
        },
        {
          name: "西安中心",
          amount1: "400000",
          amount2: "2.43",
          amount3: 12,
        },
        {
          name: "大庆中心",
          amount1: "500000",
          amount2: "1.43",
          amount3: 12,
        },
        {
          name: "北京直属业务部",
          amount1: "550000",
          amount2: "2.86",
          amount3: 12,
        },
      ],
      dataForm: {
        dataList: [
          {
            jjxId: "",
            jjxMc: "",
            jjJe: 0,
            jjxRq: "",
            sfZx: "否",
            id: "",
            shows: true,
          },
        ],
      },
      dataRule: {
        jjDeptId: [
          { required: true, message: "请选择负责部门", trigger: "blur" },
        ],
        sfNototal: [
          {
            required: true,
            message: "是否允许无总额分配不能为空",
            trigger: "blur",
          },
        ],
        sfCeff: [
          {
            required: true,
            message: "是否允许超额发放不能为空",
            trigger: "blur",
          },
        ],
        // distrPerce:[
        //   {required: true, message: '超额发放百分比不能为空', trigger: 'blur'}
        // ],
        distrMe: [
          { required: true, message: "超额发放分类不能为空", trigger: "blur" },
        ],
        sfZx: [
          { required: true, message: "是否允许预留不能为空", trigger: "blur" },
        ],
        jjLx: [{ required: true, message: "请选择奖金类型", trigger: "blur" }],
        fpLy: [{ required: true, message: "请选择分配来源", trigger: "blur" }],
        gqTime: [
          { required: true, message: "过期时间不能为空", trigger: "blur" },
        ],
        jjBh: [{ required: true, message: "请选择奖金池", trigger: "blur" }],
        jjMc: [
          { required: true, message: "奖金名称不能为空", trigger: "blur" },
        ],
        jjDateq: [
          { required: true, message: "开始日期不能为空", trigger: "blur" },
        ],
        jjDatez: [
          { required: true, message: "结束日期不能为空", trigger: "blur" },
        ],
      },
      cityOptions: [],
      mountshow: false,
      activeName:'jigou',
      tabText:{
        'jigou':'机构',
        'renyuan':'人员'
      },
      dataList:[],
      dataListLoading:false,
      showRenyuan:false,//人员奖金导入
    };
  },
  props: {
    importjjDiaolgData: {
      showTab:'all'
    },
  },
  watch:{
      importjjDiaolgData:{
        handler(newVal,oldVal){
            if(newVal.visible){
                this.mountshow = false;
            }
            if(newVal.showTab!='all'){
              this.activeName=newVal.activeName;
            }else{
              this.activeName=newVal.activeName;
            }
        },
        deep:true,
        immediate:true,
    },
  },
  methods: {
    //奖金项下拉处理
    cityHandle() {
      for (var b in this.cityOptions) {
        this.cityOptions[b].disabled = false;
        for (var a in this.dataForm.dataList) {
          if (this.dataForm.dataList[a].jjxId == this.cityOptions[b].id) {
            this.cityOptions[b].disabled = true;
          }
        }
      }

      return this.cityOptions;
    },
    jjdrBtn() {
      this.mountshow = true;
    },
    removeItem(index) {
        if(this.dataForm.dataList.length>1){
            this.dataForm.dataList.splice(index, 1);
        }else{
          this.$message.closeAll()
            this.$message.warning('请至少保留一项奖金')
        }

    },
    addItem() {
      this.dataForm.dataList.push({
        jjxId: "",
        jjxMc: "",
        jjJe: 0,
        jjxRq: "",
        sfZx: "否",
        id: "",
        shows: true,
      });
    },
    jjxZehj() {},
    //切换tab
    handleClick(tab){

    },
    // 总计表统计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += " 元";
        } else {
          sums[index] = "N/A";
        }
      });
      return sums;
    },
  },
};
</script>
